<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Capex Workplace</title>

    <link href="Content/Kendo/2014.1.318/kendo.common.css" rel="stylesheet" />
    <link href="Content/Kendo/2014.1.318/kendo.silver.css" rel="stylesheet" />
    <link href="Content/Kendo/2014.1.318/kendo.capex.extended.css" rel="stylesheet" />

    <link href="Content/MainGrid.css" rel="stylesheet" />
    <link href="Content/exiros.css" rel="stylesheet" />
    <link href="Content/ProjectState.css" rel="stylesheet" />
    <link href="Content/Header.css" rel="stylesheet" />
    <link href="Content/ProjectDetails.css" rel="stylesheet" />

    <script src="Scripts/JQuery/jquery-1.9.1.js"></script>
    <script src="Scripts/Kendo/2014.1.318/Kendo.all.js"></script>

    <script src="Scripts/MainGrid.js"></script>
    <script src="Scripts/ProjectState.js"></script>
    <script src="Scripts/Header.js"></script>
    <script src="Scripts/ProjectDetails.js"></script>
</head>

<body id="body-style">
    <div id="header-container">
        <!-- Primera linea del encabezado logo Exiros -->
        <div id="header" class="clearfix">
            <h1>Exiros</h1>
            <p><a href="">Logout</a>
            </p>
        </div>

        <!-- Segunda linea del encabezado Nombre de la aplicacion -->
        <div id="subheader" class="clearfix">
            <!-- Menu ppal de módulos -->
            <div id="menu_header">
                <div class="app_menu_icon_line" style="margin-bottom: 3px;">
                </div>
                <div class="app_menu_icon_line" style="margin-bottom: 3px;">
                </div>
                <div class="app_menu_icon_line">
                </div>
            </div>
            <h2><a>Capex Workplace</a></h2>

            <div id="nav">
                <ul>
                    <li class="active"><a href="Index.html">Project</a>
                    </li>
                    <li><a href="Tracking.html">Tracking</a>
                    </li>
                    <li><a href="#">Management</a>
                    </li>
                </ul>
            </div>

            <div id="user" class="dropdown">
                <a class="trigger-dropdown" style="background: url(Content/Images/avatar.jpg) no-repeat 12px center"><span>Javier BARRAZA</span></a>
            </div>

        </div>
    </div>

    <div id="ProjectState">
        <div class="menuState">
            <ul class="tipos_de_tablas">
                <li id="State_0" class="">
                    <a id="All" class="gradient" href="javascript:onClickStatus('0')">
                        <span class="cantidad">12</span>
                        All
                    </a>
                </li>
                <li id="State_1" class="active">
                    <a id="Sourcing" class="gradient" href="javascript:onClickStatus('1')">
                        <span class="cantidad">9</span>
                        Sourcing
                    </a>
                </li>
                <li id="State_2" class="">
                    <a id="Technical Tender" class="gradient" href="javascript:onClickStatus('2')">
                        <span class="cantidad">2</span>
                        Technical Tender
                    </a>
                </li>
                <li id="State_3" class="">
                    <a id="Technical Analysis" class="gradient" href="javascript:onClickStatus('3')">
                        <span class="cantidad">0</span>
                        Technical Analysis
                    </a>
                </li>
                <li id="State_4" class="">
                    <a id="Commercial Tender" class="gradient" href="javascript:onClickStatus('4')">
                        <span class="cantidad">1</span>
                        Commercial Tender
                    </a>
                </li>
                <li id="State_5" class="">
                    <a id="Negotiating" class="gradient" href="javascript:onClickStatus('5')">
                        <span class="cantidad">0</span>
                        Negotiating
                    </a>
                </li>
                <li id="State_6" class="">
                    <a id="Purchased" class="gradient" href="javascript:onClickStatus('6')">
                        <span class="cantidad">0</span>
                        Purchased
                    </a>
                </li>
                <li id="State_7" class="">
                    <a id="Hold" class="gradient" href="javascript:onClickStatus('7')">
                        <span class="cantidad">0</span>
                        Hold
                    </a>
                </li>
                <li id="State_8" class="">
                    <a id="Cancelled" class="gradient" href="javascript:onClickStatus('8')">
                        <span class="cantidad">0</span>
                        Cancelled
                    </a>
                </li>
            </ul>
        </div>
    </div>

	<div class="mainBody">
	<!-- Botonera ppal -->
	<div class="button-bar height-38 clearfix">
<!--         <div class="arrow-crumb">
          <span>1024</span>
        </div> -->
        <div class="button-group border-right align-left">
          <button id="btnNewProject" class="button icon icon-add" type="button" title="New Project"><span>New Project</span></button> 
          <!-- <button id="btn-new-po" class="button icon icon-add" type="button" title="Add PRs to PO"><span>PO</span></button>  -->
        </div>
 <!--        <div class="button-group border-right align-left">
          <button class="button icon icon-cancel cancel-pr" type="button" title="Cancel PRs"><span>Cancel</span></button> 
          <button class="button icon icon-reject reject-pr" type="button" title="Reject PRs"><span>Reject</span></button>
          <button class="button icon icon-reassign reassign-pr" type="button" title="Reassign Request"><span>Reassign</span></button> 
          <button class="button" type="button" title="Change Status"><span>Change Status</span></button> 
        </div>
        <div class="button-group align-left">
          <button class="button no-bg" type="button" title="Mark PR as unread">Mark as unread</button>
        </div> -->
        <div class="button-group align-right">
 <!--          <p class="align-left">Group by</p>
          <form action="some" method="" class="align-left border-right">
            <select name="filter-buyers" id="select-group">
              <option value="" selected="">No Group</option> 
              <option value="Priority">Priority</option> 
              <option value="PurchGroup">Purchase group</option>
              <option value="DestPurchGroup">Dest. Purchase group</option>
              <option value="DueDays">Due days</option>
              <option value="Age">Age</option>
              <option value="Client">Client</option>
              <option value="TreatmentStatus">Treatment Status</option>
              <option value="ExirosPR">Exiros PR</option>
              <option value="PRItem">PR Item</option>
              <option value="ClientMaterial">Client Material</option>
              <option value="ExirosMaterial">Exiros Material</option>
              <option value="RepeatedMaterial">Repeated Material</option>
            </select>
        		</form>  -->
          <button class="button icon icon-refresh no-text align-right spacer-left" title="Refresh"><span>Refresh</span></button>
        		<button class="button icon icon-xls align-right spacer-left" title="Export to XLS"><span>Export to Excel</span></button>
<!--           <button class="button icon icon-collapse no-text align-right spacer-left" title="Collapse Columns"><span>Collapse Columns</span></button>
          <button class="button icon icon-filter no-text align-right" title="Clear Autofilters"><span>Clear Autofilters</span></button> -->
        </div>
      </div>
	  
	<!-- Grilla ppal -->
    <div class="MainGrid">
        <div id="gridLine"></div>
    </div>
	</div>
	<!-- Modulo de detalle inferior -->
    <div id="detail-module">
        <div id="detail-module-container">
            <div id="module-resizer" class="clearfix">
                <p class="align-left">Select Project or Line above to view details</p>
                <h2 class="align-left">Grúas proyecto laminador</h2>
                <div class="align-right">
                    <button class="button-view" id="btn-small-detail-module" title="Small-size view">Small</button>
                    <button class="button-view" id="btn-mid-detail-module" title="Mid-size view">Mid</button>
                    <button class="button-view" id="btn-full-detail-module" title="Full-size view">Full</button>
                </div>
            </div>

            <div id="detail-module-content">
                <div id="module-header" class="clearfix">
                    <div id="divProjectProgress" class="align-left">
						<ul>
							<li class="k-label">
                                <label for="pgbProject">Progress:</label>
								<div id="pgbProject" style="width: 545px;"></div>							
							</li>
						</ul>
					</div>
					<div class="align-right">
                        <div class="button-group border-right align-left">
							<input id="cmbStates" style="width: 150px;" />							
                        </div>
						<div class="button-group border-right align-left">
							<button type="button" id="btnLineAdd" class="k-button icon icon-add"><span>Add Line</span></button>
                        </div>
						<div class="button-group border-right align-left">
							<button type="button" id="btnLineSave" class="k-button icon icon-check"><span>Save Line</span></button>
                        </div>
                        <div class="button-group align-left">
							<button type="button" id="btnLineCancel" class="k-button icon icon-cancel"><span>Cancel</span></button>
                        </div>						
                    </div>
                </div>
                <div id="module-content" class="clearfix">
                    <div class="col30percent">
                        <ul>
                            <li>
                                <label for="txtProjectName">Project Name:</label>
                                <input type="text" class="k-textbox" id="txtProjectName" required="required" value="Grúas proyecto laminador" readonly="true" style="width: 250px;" />
                            </li>
                            <li>
                                <label for="cmbOwner">Owner:</label>
                                <input id="cmbOwner" style="width: 250px;" />
                            </li>
                            <li>
                                <label for="txtPEP">PEP:</label>
                                <input type="text" class="k-textbox" id="txtPEP" required="required" readonly="true" />
                            </li>
                        </ul>
                    </div>
                    <div class="col20percent">
                        <ul>
                            <li>
                                <label for="dpCreationDate">Creation Date:</label>
                                <input id="dpCreationDate" class="date-picker" name="dpDetails" value="4/28/2014" style="width: 100px;" />
                            </li>
                            <li>
                                <label for="dpNeedDate">Need Date:</label>
                                <input id="dpNeedDate" class="date-picker" name="dpDetails" value="7/31/2014" style="width: 100px;" />
                            </li>
                        </ul>
                    </div>
                    <div class="col10percent">
                        <ul>
                            <li>
                                <label for="rcgCritically">Critically:</label>
                            </li>
                            <li>
								<ul id="ulCritically">
									<li class="k-label-input-li-set">
										<input type="radio" name="rcgCritically" value="low"><span>Low</span>							
									</li>
									<li class="k-label-input-li-set">
										<input type="radio" name="rcgCritically" value="medium" checked="true"><span>Medium</span>									
									</li>
									<li class="k-label-input-li-set">
										<input type="radio" name="rcgCritically" value="high"><span>High</span>								
									</li>									
								</ul>
                            </li>
                        </ul>
                    </div>					
                    <div class="col40percent textAreaFix">
                        <ul>
                            <li>
                                <label for="txtDescription">Description:</label>
                            </li>
                            <li>
                                <textarea rows="5" cols="87" id="txtDescription" readonly="true">Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</textarea>
                            </li>
                        </ul>
                    </div>
                </div>

                <div id="lineTab">
                    <ul>
                        <li class="k-state-active">
                            Grúa 275 toneladas
                        </li>
                    </ul>


                    <div>
                        <div id="tabDetails">
                            <ul class="subnav">
                                <li id="subnav_tab" class="active"><a href="#" divContent="lineDetailsContent">Details</a>
                                </li>
                                <li id="subnav_tab"><a href="#" divContent="linePurchaseRequest">Purchase Request</a>
                                </li>
                                <li id="subnav_tab"><a href="#" divContent="linePurchaseOrdersContent">Purchase Orders</a>
                                </li>
                                <li id="subnav_tab"><a href="#" divContent="lineSuppliersContent">Suppliers</a>
                                </li>
                                <li id="subnav_tab"><a href="#" divContent="lineAuctionsContent">Auctions</a>
                                </li>
                                <li id="subnav_tab"><a href="#" divContent="lineUsersContent">Users</a>
                                </li>
                                <li id="subnav_tab"><a href="#">Advance Information</a>
                                </li>
                                <li id="subnav_tab"><a href="#" divContent="lineLogContent">Log</a>
                                </li>
                            </ul>
                        </div>
                        <div id="contentTab">
                            <div id="lineDetailsContent" class="divContent">
                                <div class="col50percent">
                                    <ul>
                                        <li>
                                            <label for="txtLineName">Line Name:</label>
                                            <input type="text" class="k-textbox" id="txtLineName" required="required" value="Grúa 275 toneladas" readonly="true" style="width: 250px;" />
                                        </li>
                                        <li>
                                            <label for="cmbLeader">Leader:</label>
                                            <input id="cmbLeader" style="width:250px;" />
                                        </li>
                                        <li>
                                            <label for="txtLinePEP">PEP:</label>
                                            <input type="text" class="k-textbox" id="txtLinePEP" required="required" readonly="true" />
                                        </li>
                                        <li>
                                            <label id="lblLineDescription" for="txtLineDescription">Description:</label>
                                            <textarea rows="8" cols="75" id="txtLineDescription" readonly="true">Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</textarea>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col50percent">
                                    <ul>
                                        <li>
                                            <label for="cmbMaterialGroup">Material Group:</label>
                                            <input id="cmbMaterialGroup" style="width:350px;" />
                                        </li>
                                        <li>
                                            <label for="cmbCompany">Company:</label>
                                            <input id="cmbCompany" style="width:350px;" />
                                        </li>
                                        <li>
                                            <label for="cmbPlant">Plant:</label>
                                            <input id="cmbPlant" style="width:350px;" />
                                        </li>
                                        <li>
                                            <label for="cmbArea">Area:</label>
                                            <input id="cmbArea" style="width:350px;" />
                                        </li>
                                        <li>
                                            <label for="ntxtAmount">Amount:</label>
                                            <input id="ntxtAmount" style="width:150px;" />
                                            <input id="cmbCurrency" style="width:100px;" />
                                        </li>
                                        <li>
                                            <label for="ntxtDiscount">Discount:</label>
                                            <input id="ntxtDiscount" style="width:150px;" />
                                        </li>
                                        <li>
                                            <label>Total Amount:</label>
                                            <input id="ntxtTotalAmount" readonly="readonly"></input>
                                        </li>
                                    </ul>
                                </div>
                            </div>
							<div id="linePurchaseRequest" class="divContent">
								<div id="linePurchaseRequestHeader" class="divHeaderWithButtons clearfix">
									<div class="align-left">
									</div>
									<div class="align-right">
										<div class="button-group border-right align-left">
											<button type="button" id="btnPRAdd" class="k-button icon icon-add"><span>Add PR</span></button>
										</div>
										<div class="button-group align-left">
											<button type="button" id="btnPRRemove" class="k-button icon icon-reject"><span>Remove PR</span></button>
										</div>						
									</div>
								</div>
								<div id="linePurchaseRequestContent">
									<div class="k-block k-block-entity">
										<div class="k-header k-header-detail">[ A ] PR Header</div>
											<div class="col50percent-left">
												<ul>
													<li class="k-label-input-li-set">
														<label for="txtPRNumberItem" style="width: 150px;">PR Number/Item:</label>
														<input type="text" class="k-textbox" id="txtPRNumberItem" required="required" value="PR Number/Item" readonly="true" style="width: 250px;" />
													</li>
													<li class="k-label-input-li-set">
														<label for="txtPRPurchasingGroup" style="width: 150px;">Purchasing Group:</label>
														<input type="text" class="k-textbox" id="txtPRPurchasingGroup" required="required" value="Purchasing Group" readonly="true" style="width: 250px;" />
													</li>
													<li class="k-label-input-li-set">
														<label for="txtPRItemTotalValue" style="width: 150px;">PR Item Total Value:</label>
														<input type="text" class="k-textbox" id="txtPRItemTotalValue" required="required" value="PR Item Total Value" readonly="true" style="width: 125px;" />
														<input type="text" class="k-textbox" id="txtPRCurrency" required="required" value="Dollars [ U$D ]" readonly="true" style="width: 125px;" />
													</li>
													<li class="k-label-input-li-set">
														<label for="txtPRQuantity" style="width: 150px;">Quantity:</label>
														<input type="text" class="k-textbox" id="txtPRQuantity" required="required" value="Quantity" readonly="true" style="width: 125px;" />
														<input type="text" class="k-textbox" id="txtPRUnit" required="required" value="Feet [ Ft. ]" readonly="true" style="width: 125px;" />
													</li>
													<li class="k-label-input-li-set">
														<label for="txtPRStatus" style="width: 150px;">Status:</label>
														<input type="text" class="k-textbox" id="txtPRStatus" required="required" value="Status" readonly="true" style="width: 250px;" />
													</li>
													<li class="k-label-input-li-set">
														<label for="txtPRRequester" style="width: 150px;">Requester:</label>
														<input type="text" class="k-textbox" id="txtPRRequester" required="required" value="Requester" readonly="true" style="width: 250px;" />
													</li>
													<li class="k-label-input-li-set">
														<label for="txtPRFastTrack" style="width: 150px;">Fast Track is possible:</label>
														<input type="text" class="k-textbox" id="txtPRFastTrack" required="required" value="Fast Track is possible" readonly="true" style="width: 250px;" />
													</li>
												</ul>
											</div>
											<div class="col50percent">
												<ul>
													<li class="k-label-input-li-set">
														<label for="txtPRDocType" style="width: 150px;">Doc Type:</label>
														<input type="text" class="k-textbox" id="txtPRDocType" required="required" value="Doc Type" readonly="true" style="width: 250px;" />
													</li>
													<li class="k-label-input-li-set">
														<label for="txtPRItemValue" style="width: 150px;">PR Item Value (USD):</label>
														<input type="text" class="k-textbox" id="txtPRItemValue" required="required" value="PR Item Value (USD)" readonly="true" style="width: 250px;" />
													</li>
													<li class="k-label-input-li-set">
														<label for="txtPRTotalValue" style="width: 150px;">PR Exiros Total Value (USD):</label>
														<input type="text" class="k-textbox" id="txtPRTotalValue" required="required" value="PR Exiros Total Value (USD)" readonly="true" style="width: 250px;" />
													</li>
													<li class="k-label-input-li-set">
														<label for="txtPRCreationDate" style="width: 150px;">Created:</label>
														<input type="text" class="k-textbox" id="txtPRCreationDate" required="required" value="01/01/2014" readonly="true" style="width: 250px;" />
													</li>
													<li class="k-label-input-li-set">
														<label for="txtPRLastModificationDate" style="width: 150px;display: inline-block;">Modified:</label>
														<input type="text" class="k-textbox" id="txtPRLastModificationDate" required="required" value="03/05/2014" readonly="true" style="width: 250px;" />
													</li>
													<li class="k-label-input-li-set">
														<label for="txtPRReleaseDate" style="width: 150px;display: inline-block;">Released:</label>
														<input type="text" class="k-textbox" id="txtPRReleaseDate" required="required" value="30/06/2014" readonly="true" style="width: 250px;" />
													</li>
												</ul>
											</div>
									</div>
									<div class="k-block k-block-entity">
										<div class="k-header k-header-detail">[ B ] PR Client</div>
											<div class="col50percent-left">
												<ul>
													<li class="k-label-input-li-set">
														<label for="txtPRClientNumberItem" style="width: 150px;">PR Number/Item:</label>
														<input type="text" class="k-textbox" id="txtPRClientNumberItem" required="required" value="PR Number/Item" readonly="true" style="width: 250px;" />
													</li>
												</ul>
											</div>
											<div class="col50percent">
												<ul>
													<li class="k-label-input-li-set">
													</li>
												</ul>
											</div>
									</div>
									<div class="k-block k-block-entity">
										<div class="k-header k-header-detail">[ C ] PO</div>
											<div class="col50percent-left">
												<ul>
													<li class="k-label-input-li-set">
														<label for="txtPRPurchaseOrder" style="width: 150px;">Purchase Order/Item:</label>
														<input type="text" class="k-textbox" id="txtPRPurchaseOrder" required="required" value="Purchase Order/Item" readonly="true" style="width: 250px;" />
													</li>
													<li class="k-label-input-li-set">
														<label for="txtPRPOItemTotalValue" style="width: 150px;">PO Item Total Value:</label>
														<input type="text" class="k-textbox" id="txtPRPOItemTotalValue" required="required" value="PO Item Total Value" readonly="true" style="width: 125px;" />
														<input type="text" class="k-textbox" id="txtPRPOCurrency" required="required" value="Dollars [ U$D ]" readonly="true" style="width: 125px;" />
													</li>
												</ul>
											</div>
											<div class="col50percent">
												<ul>
													<li class="k-label-input-li-set">
														<label for="txtPRPODeliveryDate" style="width: 150px;">Delivery Date:</label>
														<input type="text" class="k-textbox" id="txtPRPODeliveryDate" required="required" value="01/01/1900" readonly="true" style="width: 75px;" />
													</li>
													<li class="k-label-input-li-set">
														<label for="txtPRPOCancelledItem" style="width: 150px;">Cancelled Item?:</label>
														<input type="text" class="k-textbox" id="txtPRPOCancelledItem" required="required" value="Cancelled Item?" readonly="true" style="width: 250px;" />
													</li>
												</ul>
											</div>
									</div>
									<div class="k-block k-block-entity">
										<div class="k-header k-header-detail">[ D ] Material</div>
											<div class="col50percent-left">
												<ul>
													<li class="k-label-input-li-set">
														<label for="txtPRBatchNumber" style="width: 150px;">Batch Number:</label>
														<input type="text" class="k-textbox" id="txtPRBatchNumber" required="required" value="Batch Number" readonly="true" style="width: 250px;" />
													</li>
													<li class="k-label-input-li-set">
														<label for="txtPRMatGroup" style="width: 150px;">Material Group:</label>
														<input type="text" class="k-textbox" id="txtPRMatGroup" required="required" value="Material Group" readonly="true" style="width: 250px;" />
													</li>
													<li class="k-label-input-li-set">
														<label for="txtPRMatNumber" style="width: 150px;">Mat. Number:</label>
														<input type="text" class="k-textbox" id="txtPRMatNumber" required="required" value="Material Number" readonly="true" style="width: 250px;" />
													</li>
													<li class="k-label-input-li-set">
														<label for="txtPRMatCodeClient" style="width: 150px;">Mat. Code Client:</label>
														<input type="text" class="k-textbox" id="txtPRMatCodeClient" required="required" value="Material Code Client" readonly="true" style="width: 250px;" />
													</li>
													<li class="k-label-input-li-set">
														<label for="txtPRMatDescription" style="width: 150px;">Material Description:</label>
														<input type="text" class="k-textbox" id="txtPRMatDescription" required="required" value="Material Description" readonly="true" style="width: 250px;" />
													</li>
												</ul>
											</div>
											<div class="col50percent">
												<ul>
													<li class="k-label-input-li-set">
														<label for="txtPRMatSourceListPO" style="width: 150px;">Source List of PO:</label>
														<input type="text" class="k-textbox" id="txtPRMatSourceListPO" required="required" value="Source List of PO" readonly="true" style="width: 250px;" />
													</li>
													<li class="k-label-input-li-set">
														<label for="txtPRMatCriticalPart" style="width: 150px;">Critical Part:</label>
														<input type="text" class="k-textbox" id="txtPRMatCriticalPart" required="required" value="Critical Part" readonly="true" style="width: 250px;" />
													</li>
													<li class="k-label-input-li-set">
														<label for="txtPRMatRequirementNumber" style="width: 150px;">Requirement Number:</label>
														<input type="text" class="k-textbox" id="txtPRMatRequirementNumber" required="required" value="Requirement Number" readonly="true" style="width: 250px;" />
													</li>
													<li class="k-label-input-li-set">
														<label for="txtPRMatConsumptionFrequency" style="width: 150px;">Consumption frequency:</label>
														<input type="text" class="k-textbox" id="txtPRMatConsumptionFrequency" required="required" value="Consumption frequency" readonly="true" style="width: 250px;" />
													</li>
												</ul>
											</div>
									</div>
								</div>
							</div>
                            <div id="linePurchaseOrdersContent" class="divContent">
								<div id="linePurchaseOrdersHeader" class="divHeaderWithButtons clearfix">
									<div class="align-left">
									</div>
									<div class="align-right">
										<div class="button-group border-right align-left">
											<button type="button" id="btnPOsAdd" class="k-button icon icon-add"><span>Add POs</span></button>
										</div>
										<div class="button-group align-left">
											<button type="button" id="btnPOsRemove" class="k-button icon icon-reject"><span>Remove POs</span></button>
										</div>						
									</div>
								</div>
								<div class="k-block k-block-entity">
									<div id="linePurchaseOrdersGrid">
									</div>
								</div>
                            </div>
                            <div id="lineSuppliersContent" class="divContent">
								<div id="lineSuppliersHeader" class="divHeaderWithButtons clearfix">
									<div class="align-left">
									</div>
									<div class="align-right">
										<div class="button-group border-right align-left">
											<button type="button" id="btnSuppliersAdd" class="k-button icon icon-add"><span>Add Suppliers</span></button>
										</div>
										<div class="button-group align-left">
											<button type="button" id="btnSuppliersRemove" class="k-button icon icon-reject"><span>Remove Suppliers</span></button>
										</div>						
									</div>
								</div>
									<div class="k-block k-block-entity">
										<div id="lineSuppliersGrid">
										</div>
									</div>
                            </div>
                            <div id="lineAuctionsContent" class="divContent">
								<div id="lineAuctionsHeader" class="divHeaderWithButtons clearfix">
									<div class="align-left">
									</div>
									<div class="align-right">
										<div class="button-group border-right align-left">
											<button type="button" id="btnAuctionsAdd" class="k-button icon icon-add"><span>Add Auctions</span></button>
										</div>
										<div class="button-group align-left">
											<button type="button" id="btnAuctionsRemove" class="k-button icon icon-reject"><span>Remove Auctions</span></button>
										</div>						
									</div>
								</div>
									<div class="k-block k-block-entity">
										<div id="lineAuctionsGrid">
										</div>
									</div>
                            </div>
                            <div id="lineUsersContent" class="divContent">
								<div id="lineUsersHeader" class="divHeaderWithButtons clearfix">
									<div class="align-left">
									</div>
									<div class="align-right">
										<div class="button-group border-right align-left">
											<button type="button" id="btnUsersAdd" class="k-button icon icon-add"><span>Add Users</span></button>
										</div>
										<div class="button-group align-left">
											<button type="button" id="btnUsersRemove" class="k-button icon icon-reject"><span>Remove Users</span></button>
										</div>						
									</div>
								</div>
									<div class="k-block k-block-entity">
										<div id="lineUsersGrid">
										</div>
									</div>
                            </div>
                            <div id="lineLogContent" class="divContent">
									<div class="k-block k-block-entity">
										<div id="lineLogGrid">
										</div>
									</div>
                            </div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div id="winAddPR" align="center" style="display:none">
		<div id="filterWinAddPR" class="standard-padding">
			<div class="k-block k-block-entity">
				<div class="k-header k-header-detail">Filters</div>
					<div class="col50percent-left">
						<ul>
							<li class="k-label-input-li-set">
								<label for="txtFilterPurchaseGroupFrom" class="label-filter-windows">Purchase Group:</label>
								<input type="text" class="k-textbox" id="txtFilterPurchaseGroupFrom" required="required" value="" readonly="true" style="width: 250px;" />
							</li>
							<li class="k-label-input-li-set">
								<label for="dpFilterReleaseDateFrom" class="label-filter-windows">Release Date From:</label>
								<input id="dpFilterReleaseDateFrom" class="date-picker" name="dpFilterReleaseDateFrom" value="4/28/2014" style="width: 100px;" />
								<label for="dpFilterReleaseDateTo">To:</label>
								<input id="dpFilterReleaseDateTo" class="date-picker" name="dpFilterReleaseDateTo" value="4/28/2014" style="width: 100px;" />
							</li>
							<li class="k-label-input-li-set">
								<label for="dpFilterPurchaseRequisitionDateFrom" class="label-filter-windows">Purch. Req. Date From:</label>
								<input id="dpFilterPurchaseRequisitionDateFrom" class="date-picker" name="dpFilterPRDateFrom" value="4/28/2014" style="width: 100px;" />
								<label for="dpFilterPurchaseRequisitionDateTo">To:</label>
								<input id="dpFilterPurchaseRequisitionDateTo" class="date-picker" name="dpFilterPRDateTo" value="4/28/2014" style="width: 100px;" />
							</li>
							<li class="k-label-input-li-set">
								<input type="checkbox" id="chkFilterOnlyNotErased"/>
								<label for="chkFilterOnlyNotErased" style="width: 250px;">Only Not Erased</label>
							</li>
							<li class="k-label-input-li-set">
								<input type="checkbox" id="chkFilterOnlyNotClosed"/>
								<label for="chkFilterOnlyNotClosed" style="width: 250px;">Only Not Closed</label>
							</li>
						</ul>
					</div>
					<div class="col50percent-left">
						<ul>
							<li class="k-label-input-li-set">
								<label for="txtFilterPurchaseRequisitionFrom" class="label-filter-windows">Purchase Requisition:</label>
								<input type="text" class="k-textbox" id="txtFilterPurchaseRequisitionFrom" required="required" value="" readonly="true" style="width: 250px;" />
							</li>
							<li class="k-label-input-li-set">
								<label for="txtFilterItemRequisitionFrom" class="label-filter-windows">Item of Requisition:</label>
								<input type="text" class="k-textbox" id="txtFilterItemRequisitionFrom" required="required" value="" readonly="true" style="width: 250px;" />
							</li>
							<li class="k-label-input-li-set">
								<input type="checkbox" id="chkFilterOnlyWithoutPurchDoc"/>
								<label for="chkFilterOnlyWithoutPurchDoc" style="width: 250px;">Only PR without Purch. Doc.</label>
							</li>									
						</ul>
					</div>
			</div>
		</div>
		<div id="buttonsWinSearchPR" align="right" class="standard-padding">
			<button type="button" id="btnWinSearchPR" class="k-button k-button-icontext"><span class="k-icon k-search"></span>Search</button>
		</div>
		<div id="resultsWinAddPR" class="standard-padding">
			<div class="k-block k-block-entity">
				<div class="k-header k-header-detail">Results</div>
					<div id="linePurchaseRequestsGrid"></div>
				</div>
		</div>
		<div id="buttonsWinAddPR" align="right" class="standard-padding">
			<button type="button" id="btnWinPRAdd" class="k-button icon icon-add"><span>Add</span></button>
			<button type="button" id="btnWinPRCancel" class="k-button icon icon-cancel"><span>Cancel</span></button>
		</div>
	</div>
	
	<div id="winAddSuppliers" align="center" style="display:none">
		<div id="filterWinAddSuppliers" class="standard-padding">
			<div class="k-block k-block-entity">
						<div class="k-header k-header-detail">Filters</div>
							<ul style="text-align: left;">
								<label>
									Supplier
								</label>
								<input id="searchIdSupplier" autocomplete="off" type="text" />
								<label>
								  <input type="radio" name="answer" value="R" checked="checked"/> Registered
								</label>
								 <label>
								  <input type="radio" name="answer" value="C"/> Manual
								</label>
							</ul>
			</div>
		</div>
		<div id="buttonsWinSearchSuppliers" align="right" class="standard-padding">
			<button type="button" id="btnWinSearchSuppliers" class="k-button k-button-icontext"><span class="k-icon k-search"></span>Search</button>
		</div>
		<div id="resultsWinAddSuppliers" class="standard-padding">
			<div class="k-block k-block-entity">
				<div class="k-header k-header-detail">Results</div>
					<div id="lineSuppliersSearchGrid"></div>
			</div>
		</div>
		<div id="buttonsWinAddSuppliers" align="right" class="standard-padding">
			<button type="button" id="btnWinSuppliersAdd" class="k-button icon icon-add"><span>Add</span></button>
			<button type="button" id="btnWinSuppliersCancel" class="k-button icon icon-cancel"><span>Cancel</span></button>
		</div>
	</div>

	<div id="winAddComment" align="center" style="display:none">
		<div id="addComment" class="standard-padding">
			<ul>
				<li class="align-left">
					<!-- <label for="txtComment">Your comment here:</label> -->
					<textarea rows="5" cols="87" id="txtComment"></textarea>
				</li>
			</ul>
		</div>
		<div id="buttonsWinAddComment" align="right" class="standard-padding">
			<button type="button" id="btnWinCommentAdd" class="k-button icon icon-check"><span>Save</span></button>
			<button type="button" id="btnWinCommentCancel" class="k-button icon icon-cancel"><span>Cancel</span></button>
		</div>
	</div>
	
	<span id="notification" style="display:none;"></span>
	
	<script id="successTemplate" type="text/x-kendo-template">        
		<div class="save-success">
			<img src="Content/Images/success-icon.png" />
			<h3>#= message #</h3>
		</div>
	</script>	
	<script id="errorTemplate" type="text/x-kendo-template">        
		<div class="line-creation-error">
			<img src="Content/Images/error-icon.png" />
			<h3>#= title #</h3>
			<p>#= message #</p>
		</div>
	</script>	

	<script>
		$(".panelbar").kendoPanelBar({
			expandMode: "multiple", // single
			animation: {
				expand: {
				   duration: 100,
				   effects: "expandVertical"
			   }
		   }
		});
	</script>
</body>

</html>